<template>
    <div class="navbar">
        <div class="container flex items-center h-[60px]">
            <n-button text class="!text-xl !font-bold">自由编程</n-button>
            <ui-menu>
                <ui-menu-item v-for="(item,index) in menus" :key="index" :active="isMenuItemActive(item)" @click="handleOpen(item.path)">
                    {{ item.name }}
                </ui-menu-item>
            </ui-menu>
            <n-button circle class="ml-auto mr-3">
                <template #icon>
                    <n-icon><Search /></n-icon>
                </template>
            </n-button>
            <span v-if="userStore.isLogin" class="px-5">消息({{ userStore.msgcount }})</span>
            <nuxt-link to="/login" v-if="!userStore.isLogin">
                <n-button secondary strong>登录</n-button>
            </nuxt-link>
            <n-dropdown  :options="userOptions" @select="handleSelect" v-else>
                <img style="width: 32px;height:32px;border-radius: 50%;"
                     src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
            </n-dropdown>
        </div>
    </div>
    <div class="w-[100%] h-[80px]"></div>
</template>
<script setup>
import { Search } from "@vicons/ionicons5"

const route = useRoute()
// 获取到状态管理
const userStore = useStore.userState()
// 获取消息的状态管理对象
// const msgState = useMsg()

const menus = [{
    name:"首页",
    path:"/",
},{
    name:"课程",
    path:"/course"
},{
    name:"社区",
    path:"/social"
},{
    name:"秒杀",
    path:"/miaosha"
},{
    name:"专栏",
    path:"/special"
}]

function handleOpen(path){
    navigateTo(path)
}

const isMenuItemActive = (item)=>{
    return route.path == item.path ||  route.path.indexOf(item.path=='/'?'-1':item.path)!=-1
}

const userOptions = [
    {
        label: userStore?.username,
        key: "username",
    },{
        label: "用户中心",
        key: "center",
    },{
        label: "退出",
        key: "logout",
    }]


const handleSelect = (k)=>{
    switch (k) {
        case "logout":
            useDialog().warning({
                content: "是否要退出登录？",
                positiveText: "退出",
                negativeText: "取消",
                onPositiveClick: async () => {
                    await useLogout()
                },
            });
            break;
        case "username" :
        case "center":
            navigateTo({
                path:"/user"
            })
            break;
    }
}

</script>
<style>
.navbar {
    z-index: 1000;
    @apply bg-white fixed top-0 left-0 right-0 shadow-sm;
}
</style>
